<template>
  <div class="app-market">
    <!-- 应用类目 -->
    <div class="app-market-classify">
      <div class="title">应用类目：</div>
      <div class="all-list">
        <div>全部</div>
        <div>应用系统</div>
        <div>小程序</div>
        <div>插件</div>
      </div>
    </div>
    <!-- 天择可付收银系统 -->
    <div class="app-market-os">
      <!-- 单个系统开始 -->
      <div class="list" @click="toOsDetail">
        <div class="left"><img src="" alt=""></div>
        <div class="middle">
          <div class="title">天择可付收银系统</div>
          <div class="tip">支持第三方平台聚合收银，花呗分期收银，刷脸支付，信用收银，预授权。通过深化支付后营销，打造全行业智慧经营</div>
          <div>评价： <a-rate :defaultValue="2" disabled /></div>
        </div>
        <div class="right">
          <div class="price">￥ <span>12880.00</span></div>
          <div class="limit">永久</div>
        </div>
      </div>
      <!-- 单个系统开始 -->
      <div class="list">
        <div class="left"><img src="" alt=""></div>
        <div class="middle">
          <div class="title">天择可付收银系统</div>
          <div class="tip">支持第三方平台聚合收银，花呗分期收银，刷脸支付，信用收银，预授权。通过深化支付后营销，打造全行业智慧经营</div>
          <div>评价： <a-rate :defaultValue="2" disabled /></div>
        </div>
        <div class="right">
          <div class="price">￥ <span>12880.00</span></div>
          <div class="limit">永久</div>
        </div>
      </div>
      <!-- 单个系统开始 -->
      <div class="list">
        <div class="left"><img src="" alt=""></div>
        <div class="middle">
          <div class="title">天择可付收银系统</div>
          <div class="tip">支持第三方平台聚合收银，花呗分期收银，刷脸支付，信用收银，预授权。通过深化支付后营销，打造全行业智慧经营</div>
          <div>评价： <a-rate :defaultValue="2" disabled /></div>
        </div>
        <div class="right">
          <div class="price">￥ <span>12880.00</span></div>
          <div class="limit">永久</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  methods: {
    // 跳转系统详情页
    toOsDetail() {
      this.$router.push('osdetail')
    }
  }
}
</script>
<style lang="less" scoped>
  .app-market {
    &-classify {
      display: flex;
      background: #ffffff;
      padding: 16px 30px;
      box-sizing: border-box;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
      border-radius: 5px;
      align-items: center;
    }
    .title {
      font-size: 16px;
      margin-right:10px;
    }
    .all-list {
      display: flex;
      color: #666666;
      div {
        padding: 3px 15px;
        box-sizing: border-box;
        border:1px solid #CCCCCC;
        border-radius: 3px;
        margin: 0 20px;
      }
    }
    &-os {
      background: #ffffff;
      margin-top: 5px;
      padding: 0 20px 100px 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
      border-radius: 5px;
      .list {
        display: flex;
        padding: 23px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #E7E7E7;
        justify-content: space-between;
        .left {
          border: 1px solid red;
          width: 60px;
          height: 60px;
        }
        .middle {
          // border: 1px solid blue;
          flex: 1;
          margin-left: 20px;
          .title {
            font-size: 22px;
            color: #333333;
          }
          .tip {
            width: 538px;
            color: #666666;
            margin: 7px 0 ;
          }
        }
        .right {
          .price {
            color: #F75800;
            span {
              font-size: 30px;
            }
          }
          .limit {
            text-align: right;
            color: #999999;
          }
        }
      }
    }
  }
</style>